"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/12/26
 */
import * as React from 'react'
import Request from "../utils/Request";

const {View, ActivityIndicator, StyleSheet} = require('react-native');
import MyText from "./MyText";
import {commonStyles} from "../assets/styles/common";
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../constant";
import Colors from "../assets/styles/Colors";

class MyComponent<P, S> extends React.Component<any, any> {
    http: RequestProps;

    constructor(props: P, context: S) {
        super(props, context);
        this.state = {
            _loading: false,
            _tip: '加载中'
        };
        this.http = Request;
    }


    componentWillMount(): void {

    }


    componentDidMount(): void {
    }


    componentWillUnmount(): void {

    }

    loading = (tip?: '加载中') => {
        this.setState({
            _loading: true,
            _tip: tip
        })
    };

    endLoading = () => {
        this.setState({
            _loading: false,
        })
    };

    render(element?: any) {
        return (
            <View style={[commonStyles.flex1, commonStyles.relative]}>
                {element}
                {this.state._loading ? <View style={styles.indicator}>
                    <ActivityIndicator
                        animating={this.state._loading}
                        size="large"
                    />
                    <MyText color={Colors.Red}>{this.state._tip}</MyText>
                </View> : null}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    indicator: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT,
        backgroundColor: 'rgba(0,0,0,0.5)',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    }
});

export default MyComponent;